<template>
	<view class="editReport ff-font-14">
		<view v-if="reportInfo.status == 6" class="ff-padding-10 ff-color-fff ff-bg-red ff-font-13">
			驳回原因：{{ reportInfo.reportRefuseReason ? reportInfo.reportRefuseReason : '/' }}
		</view>
		<view class="ff-bg-fff ff-border-radius-10 ff-padding-10 ff-margin-10 ff-font-14">
			<view class="ff-margin-bottom-25">
				<view class="ff-font-16 ff-color-333 ff-font-weight-600 ff-margin-bottom-7">本次维保养护情况简述及结论</view>
				<view class="ff-font-13 ff-color-9A9A9A ff-margin-bottom-20">请参考示例，如实填写。</view>
				<view class="ff-margin-bottom-10 ff-font-13 ff-flex">
					<view @click.stop="inNormalClick" class="but1 ff-margin-right-10">导入本次不合格数据</view>
					<view @click.stop="inLastResultClick" class="but2">导入上次结论</view>
				</view>
				<u-input type="textarea" maxlength="-1" height="200" :clearable="false" :border="true" v-if="inpState"
					v-model="params.reportContent"
					placeholder="例:本次按计划维保了...设施、...设施，发现故障或者问题...处，已经修复或解决...处，余...处因为...原因尚未修复或解决，建议......或拟采取...措施于...时间前完成。其余均正常。" />
			</view>
			<view class="ff-margin-bottom-25">
				<view class="ff-font-16 ff-margin-bottom-20 ff-color-333 ff-font-weight-600">已上报的待维修问题<text
						class="ff-font-13 ff-color-9A9A9A">（本项选填）</text>
				</view>

				<view class="ff-margin-bottom-10 ff-font-13">
					<view @click.stop="inLastIssueClick" class="but2">导入上次待维修问题</view>
				</view>
				<u-input type="textarea" maxlength="-1" height="200" :clearable="false" :border="true" v-if="inpState"
					v-model="params.reportRepaired" placeholder="请输入已上报管理方的待维修问题。" />
			</view>
		</view>
		<view class="ff-bg-fff ff-border-radius-10 ff-padding-10 ff-margin-10 ff-font-14">
			<view class="ff-font-16 ff-color-333 ff-font-weight-600 ff-margin-bottom-7">资料补录<text
					class="ff-font-13 ff-color-9A9A9A">（本项选填）</text></view>
			<view class="ff-font-13 ff-color-9A9A9A ff-margin-bottom-20">如果有需要补充的资料或说明，请在此添加</view>
			<u-input type="textarea" maxlength="-1" height="200" :clearable="false" :border="true" v-if="inpState"
				v-model="params.additionalDescription" placeholder="文字说明" />
			<view class="ff-margin-top-13">
				<u-row gutter="20">
					<u-col span="3" v-for="(item, index) of params.additionalAttachList" :key="index">
						<view class="infoImg ff-margin-bottom-10 ff-relative" @click="previewImgClick(item)">
							<image :src="item" mode="" />
							<view @click.stop="deteleImgClick(index)" class="closeIcon"><u-icon name="close"
									color="#fff" size="22"></u-icon></view>
						</view>
					</u-col>
					<u-col span="3">
						<image @click="upateImgClick" class="infoImg"
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/upate-icon.png"
							mode="" />
					</u-col>
				</u-row>
			</view>

		</view>
		<view class="editReport-but"><u-button type="primary" shape="circle" @click="submitCodeClick">确定提交</u-button>
		</view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<!-- helangCompress-压缩图片 -->
		<f-compressImg ref="helangCompress" />
	</view>
</template>

<script>
	export default {
		name: 'editReport',
		data() {
			return {
				params: {
					maintenanceId: '',
					reportContent: '',
					reportRepaired: '',
					additionalDescription: '', // 资料补录说明
					additionalAttachList: [], // 资料补录的照片
				},
				inpState: true, // 文本框展/隐
				reportInfo: {}, // 报告书详情
			};
		},
		onLoad(e) {
			// console.log('前页面传过来的数据------', e);
			this.params.maintenanceId = e.id;
			this.getReportInfo(e.id); // 获取报告书详情数据
		},
		methods: {
			// 获取报告书详情数据
			async getReportInfo(maintenanceId) {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: `/maintenance/detailV3/${maintenanceId}`
				});
				// console.log('获取报告书详情数据-----', data);
				if (data.code == 200) {
					this.reportInfo = data.data;
					if (this.reportInfo.reportContent) {
						this.params.reportContent = this.reportInfo.reportContent;
					}
					if (this.reportInfo.reportRepaired) {
						this.params.reportRepaired = this.reportInfo.reportRepaired;
					}
					if (this.reportInfo.additionalDescription) {
						this.params.additionalDescription = this.reportInfo.additionalDescription;
					}
					if (this.reportInfo.additionalAttachList) {
						this.params.additionalAttachList = this.reportInfo.additionalAttachList;
					}
				}
				this.$refs.loading.closeLoading();
			},
			// 导入本次不合格数据
			inNormalClick() {
				let that = this
				uni.showModal({
					title: '',
					content: '导入本次不合格数据？导入会覆盖本次正在编辑的内容。',
					confirmColor: '#3178FF',
					confirmText: '确认',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							that.inpState = false
							that.$refs.loading.openLoading('获取中···');
							that.$http.post({
								url: `/serviceOrg/staff/getCurrentAbnormalData/${that.params.maintenanceId}`
							}).then(res => {
								// console.log('获取异常数据----', res)
								if (res.code == 200) {
									that.params.reportContent = res.data
									that.inpState = true
								} else {
									that.inpState = true
									uni.showModal({
										title: '',
										content: res.msg,
										confirmColor: '#3178FF',
										confirmText: '确认',
										showCancel: false,
										success: function(res) {
											if (res.confirm) {}
										}
									})
								}
							})
							that.$refs.loading.closeLoading();
						}
					},
				})
			},
			// 导入上次结论
			inLastResultClick() {
				let that = this
				that.inpState = false
				that.$refs.loading.openLoading('获取中···');
				that.$http.post({
					url: `/serviceOrg/staff/getLastReportContent/${that.params.maintenanceId}`
				}).then(res => {
					// console.log('导入上次结论---获取', res)
					if (res.code == 200) {
						uni.showModal({
							title: '',
							content: '导入上次结论？导入会覆盖本次正在编辑的内容。',
							confirmColor: '#3178FF',
							confirmText: '确认',
							showCancel: true,
							success: function(res1) {
								if (res1.confirm) {
									that.inpState = true
									that.params.reportContent = res.data
								} else {
									that.inpState = true
								}
							}
						})
					} else {
						that.inpState = true
						uni.showModal({
							title: '',
							content: res.msg,
							confirmColor: '#3178FF',
							confirmText: '确认',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {}
							}
						})
					}
				})
				that.$refs.loading.closeLoading();
			},
			// 导入上次待维修问题
			inLastIssueClick() {
				let that = this
				that.inpState = false
				that.$refs.loading.openLoading('获取中···');
				that.$http.post({
					url: `/serviceOrg/staff/getLastReportRepaired/${that.params.maintenanceId}`
				}).then(res => {
					// console.log('导入上次待维修问题----', res)
					if (res.code == 200) {
						that.inpState = true
						uni.showModal({
							title: '',
							content: '导入上次待维修问题？导入会覆盖本次正在编辑的内容。',
							confirmColor: '#3178FF',
							confirmText: '确认',
							showCancel: true,
							success: function(item) {
								if (item.confirm) {
									that.params.reportRepaired = res.data
								}
							},
						})
					} else {
						that.inpState = true
						uni.showModal({
							title: '',
							content: res.msg,
							confirmColor: '#3178FF',
							confirmText: '确认',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {}
							}
						})
					}
					that.$refs.loading.closeLoading();
				})

			},
			// 上传图片(其中包括设备证书，设备发票，设备照片)
			upateImgClick() {
				let that = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'], // 拍照 video：视频
					camera: 'back', // 前置摄像头
					sizeType: ['compressed'], // original 原图，compressed 压缩图
					sourceType: ['camera', 'album'],
					success: function(res) {
						that.inpState = false
						that.$refs.loading.openLoading('上传中···'); // 打开loading动画
						that.$refs.helangCompress
							.compress({
								src: res.tempFiles[0].tempFilePath,
								// maxSize: 1080,
								// fileType: 'jpg',
								// quality: 0.85
								// minSize: 640 //最小压缩尺寸，图片尺寸小于该时值不压缩，非H5平台有效。若需要忽略该设置，可设置为一个极小的值，比如负数。
							})
							.then(res => {
								// 压缩成功回调
								// console.log('压缩成功回调', res);
								that.$uploadImg.uploadImgOSS(res, 8).then(res => {
									if (res) {
										that.$refs.loading.closeLoading(); // 关闭loading动画
										that.$refs.uToast.show({
											title: '上传成功',
											type: 'success',
											duration: 500
										});

										setTimeout(() => {
											that.inpState = true
											that.params.additionalAttachList.push(res);
										}, 800)
									} else {
										that.$refs.loading.closeLoading(); // 关闭loading动画
										that.$refs.uToast.show({
											title: '上传失败，请重新上传',
											type: 'error',
											duration: 500
										});
										setTimeout(() => {
											that.inpState = true
										}, 800)
									}
								});
							})
							.catch(() => {
								// 压缩失败回调
								// console.log('压缩失败回调', err);
								that.$refs.loading.closeLoading(); // 关闭loading动画
								that.$refs.uToast.show({
									title: '上传失败，请重新上传！',
									type: 'error',
									duration: 500
								});
								setTimeout(() => {
									that.inpState = true
								}, 800)
							});
					}
				});
			},
			// 删除图片
			deteleImgClick(index) {
				let that = this
				that.inpState = false
				uni.showModal({
					title: '',
					content: '请确认是否删除当前照片？',
					confirmColor: '#3178FF',
					confirmText: '确认',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							that.$refs.uToast.show({
								title: '删除成功',
								type: 'success',
								duration: 500
							});
							setTimeout(() => {
								that.inpState = true
							}, 600)
							that.params.additionalAttachList.splice(index, 1);
						} else {
							that.inpState = true
						}
					}
				})
			},
			// 预览图片
			previewImgClick(item) {
				uni.previewImage({
					urls: this.params.additionalAttachList,
					current: item
				});
			},
			// 确定提交----操作
			submitCodeClick() {
				let that = this;
				if (!that.params.reportContent) {
					uni.showModal({
						title: '',
						content: '请输入本次维保情况简述及结论',
						confirmColor: '#3178FF',
						confirmText: '确认',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {}
						}
					})
					return;
				}
				this.inpState = false;
				that.$refs.loading.openLoading('提交中···');
				that.$http
					.post({
						url: '/serviceOrg/staff/writeReport',
						data: that.params
					})
					.then(res => {
						// console.log('确定提交----操作-----返回的结果', res);
						that.$refs.loading.closeLoading();
						if (res.code == 200) {
							that.$refs.uToast.show({
								title: res.msg,
								type: 'success'
							});
							setTimeout(() => {
								that.$pageJump.reLaunch('/pages/maintenance/mechanism/Maintenance');
							}, 500);
						} else {
							this.inpState = true;
							uni.showModal({
								title: '温馨提示',
								content: res.msg,
								confirmColor: '#3178FF',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										// console.log('用户点击确定')
									}
								},
							})
						}
					});
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.editReport {
		padding-bottom: 30rpx;

		.infoImg {
			width: 100%;
			height: 140rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		&-but {
			width: 90%;
			margin: 15% 5% 10%;

			/deep/.u-size-default {
				height: 90rpx !important;
				line-height: 90rpx !important;
			}
		}
	}

	.but1 {
		padding: 15rpx;
		border-radius: 10rpx;
		color: #f90;
		border: 2rpx solid #fcbd71;
		background-color: #fdf6ec;
	}

	.but2 {
		padding: 15rpx;
		border-radius: 10rpx;
		color: #2979ff;
		border: 2rpx solid #a0cfff;
		background-color: #ecf5ff;
		display: inline-block;
	}
</style>